<template>
  <div class="a-input" :class="[{ 'a-input--suffix': this.showSuffix }]">
    <input
      class="a-input-inner"
      :class="[{ 'is-disabled': disabled }]"
      :type="showPassword ? (PasswordVisable ? 'text' : 'password') : type"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
      :name="name"
      :value="value"
      @input="handleInput"
    />
    <span class="a-input_suffix">
      <i
        v-if="showPassword && type == 'password'"
        @click="handlePassword"
        v-show="PasswordVisable ? false : true"
      >
        <svg
          t="1647362830382"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6909"
          width="20"
          height="20"
        >
          <path
            d="M786.645333 181.418667l45.269334 45.269333-573.226667 573.226667-45.269333-45.269334 573.226666-573.226666z m-18.794666 167.637333c36.138667 34.56 71.146667 76.949333 105.024 127.146667a64 64 0 0 1 2.410666 67.712l-2.410666 3.882666-6.058667 8.853334C759.786667 711.765333 641.493333 789.333333 512 789.333333c-51.136 0-100.501333-12.096-148.138667-36.266666l48.213334-48.213334c32.768 13.738667 66.069333 20.48 99.925333 20.48 105.770667 0 206.037333-65.749333 301.952-204.757333l5.866667-8.576-5.888-8.597333c-29.994667-43.477333-60.416-79.786667-91.306667-109.12l45.226667-45.226667zM512 234.666667c45.013333 0 88.64 9.365333 130.944 28.096l-49.408 49.429333A253.226667 253.226667 0 0 0 512 298.666667c-105.770667 0-206.037333 65.749333-301.952 204.757333L204.181333 512l5.888 8.597333c25.856 37.461333 52.010667 69.589333 78.506667 96.554667l-45.205333 45.205333c-31.616-32.106667-62.378667-70.293333-92.245334-114.56a64 64 0 0 1-2.410666-67.712l2.410666-3.882666 6.058667-8.853334C264.213333 312.234667 382.506667 234.666667 512 234.666667z m133.696 236.586666a141.482667 141.482667 0 0 1-180.074667 180.074667l56.96-56.96a77.525333 77.525333 0 0 0 66.176-66.176l56.938667-56.96zM512 376.128c5.610667 0 11.157333 0.32 16.597333 0.96l-157.098666 157.12A141.482667 141.482667 0 0 1 512 376.149333z"
            p-id="6910"
          ></path>
        </svg>
      </i>
      <i v-if="showPassword" @click="handlePassword" v-show="PasswordVisable">
        <svg
          t="1647363192306"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7044"
          width="20"
          height="20"
        >
          <path
            d="M512 234.666667c131.946667 0 252.245333 80.512 360.874667 241.536a64 64 0 0 1 2.410666 67.712l-2.410666 3.882666-6.058667 8.853334C759.786667 711.765333 641.493333 789.333333 512 789.333333c-131.946667 0-252.245333-80.512-360.874667-241.536a64 64 0 0 1-2.410666-67.712l2.410666-3.882666 6.058667-8.853334C264.213333 312.234667 382.506667 234.666667 512 234.666667z m0 64c-105.770667 0-206.037333 65.749333-301.952 204.757333L204.181333 512l5.888 8.597333C306.069333 659.648 406.314667 725.333333 512 725.333333c105.770667 0 206.037333-65.749333 301.952-204.757333l5.866667-8.576-5.888-8.597333C717.930667 364.352 617.685333 298.666667 512 298.666667z m0 77.482666a141.482667 141.482667 0 1 1 0 282.944 141.482667 141.482667 0 0 1 0-282.944z m0 64a77.482667 77.482667 0 1 0 0 154.944 77.482667 77.482667 0 0 0 0-154.944z"
            p-id="7045"
          ></path>
        </svg>
      </i>
      <i v-if="clearable && value" @click="clear">
        <svg
          t="1647363939859"
          class="icon"
          viewBox="0 0 1045 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7179"
          width="20"
          height="20"
        >
          <path
            d="M282.517333 213.376l-45.354666 45.162667L489.472 512 237.162667 765.461333l45.354666 45.162667L534.613333 557.354667l252.096 253.269333 45.354667-45.162667-252.288-253.44 252.288-253.482666-45.354667-45.162667L534.613333 466.624l-252.096-253.226667z"
            p-id="7180"
          ></path></svg
      ></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "a-input",
  data() {
    return {
      PasswordVisable: false,
    };
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    placeholder: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    showPassword: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    //输入信息显示关闭按钮，可删除所有信息
    clear() {
      this.$emit("input", "");
    },
    //点击眼睛显示密码/隐藏密码
    handlePassword() {
      this.PasswordVisable = !this.PasswordVisable;
    },
  },
  computed: {
    //是否显示按钮
    showSuffix() {
      return this.clearable || this.showPassword;
    },
  },
};
</script>

